<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>全功能卡片生成器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
    <style>
        :root { --card-width: 300px; }
        body {
            margin: 0;
            padding: 20px;
            background: #f0f2f5;
            min-height: 100vh;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
            gap: 20px;
            justify-content: center;
        }
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            break-inside: avoid;
        }
        #textInput {
            width: 100%;
            height: 100px;
            margin-bottom: 20px;
            padding: 12px;
        }
        @media (min-width: 1200px) {
            .container { grid-template-columns: repeat(4, var(--card-width)); }
        }
        /* 卡片样式 */
        .vintage { background: linear-gradient(#f5e6d3, #e7d9c5); font-family: cursive; }
        .cyberpunk { background: #0a0a2e; color: #00f3ff; font-family: monospace; }
        .minimalist { background: white; font-family: sans-serif; letter-spacing: 0.5px; }
        .nature { background: linear-gradient(#e8f5e9, #dcedc8); font-family: serif; }
    </style>
</head>
<body>
    <textarea id="textInput" placeholder="输入文字内容..."></textarea>
    <div class="container">
        <div class="card vintage" data-style="复古手账">
            <div class="content"></div>
            <button onclick="exportCard(this)">导出</button>
        </div>
        <div class="card cyberpunk" data-style="赛博朋克">
            <div class="content"></div>
            <button onclick="exportCard(this)">导出</button>
        </div>
        <div class="card minimalist" data-style="极简主义">
            <div class="content"></div>
            <button onclick="exportCard(this)">导出</button>
        </div>
        <div class="card nature" data-style="自然诗意">
            <div class="content"></div>
            <button onclick="exportCard(this)">导出</button>
        </div>
    </div>

    <script>
        function updateCards() {
            const text = document.getElementById('textInput').value;
            document.querySelectorAll('.content').forEach(div => {
                div.innerHTML = text.replace(/\n/g, '<br>');
                autoScaleText(div);
            });
        }

        function autoScaleText(container) {
            let fontSize = 16;
            container.style.fontSize = fontSize + 'px';
            while (container.scrollHeight > container.offsetHeight && fontSize > 10) {
                fontSize -= 1;
                container.style.fontSize = fontSize + 'px';
            }
        }

        function exportCard(btn) {
            const card = btn.closest('.card');
            domtoimage.toPng(card, {
                quality: 0.95,
                width: card.offsetWidth * 2,
                height: card.offsetHeight * 2,
                style: {
                    transform: 'scale(2)',
                    transformOrigin: 'top left'
                }
            }).then(dataUrl => {
                const link = document.createElement('a');
                link.download = `${card.dataset.style}_${Date.now()}.png`;
                link.href = dataUrl;
                link.click();
            });
        }

        // 实时输入监听
        document.getElementById('textInput').addEventListener('input', updateCards);
        window.addEventListener('resize', () => setTimeout(updateCards, 200));
    </script>
</body>
</html>